<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="服务种类" prop="servetype">
                <el-select v-model="queryParams.servetype" placeholder="请输入服务种类" style="width: 180px" clearable>
                    <el-option v-for="dict in servetype" :key="dict.key" :label="dict.label" :value="dict.label" />
                </el-select>
            </el-form-item>
            <el-form-item label="店铺地址" prop="shopaddress">
                <el-cascader filterable size="large" ref="cascader" :options="options" v-model="selectedOptions"
                    :props="defaultParams" @change="handleChange">
                </el-cascader>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery(queryParams)">搜索
                </el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="2.0">
                <el-button type="primary" plain size="mini" @click="kzfenpeishangjia" :disabled="lock"
                    v-hasPermi="['kuser:allkz:fenpeikz:fenpei']" style="float: right;">确认分配</el-button>
            </el-col>
        </el-row>
        <el-table ref="multipleTable" v-loading="loading" :data="shopList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="商家编号" align="center" prop="shopid" />
            <el-table-column label="商家名称" align="center" prop="shopname" />
            <el-table-column label="客资余额" align="center" prop="shopcmMoney" />
            <el-table-column label="成交余额" align="center" prop="shopdealMoney" />
            <el-table-column label="服务种类" align="center" prop="shoptype" />
            <el-table-column label="店铺地址" align="center" prop="shopaddress" />
        </el-table>
    </div>
</template>
<script>
import { findAllShopa, kzfenpeishangjia } from "@/api/kuser/allkz.js";
// import { regionData, CodeToText, TextToCode } from 'element-china-area-data';
import allData from '@/api/kuser/level-data.js';
export default {
    data() {
        return {
            lock: false,
            // 显示搜索条件
            showSearch: true,
            options: allData,
            defaultParams: {
                value: "name", //设置默认值value
                label: "name", //设置显示的是什么
                children: "children" //设置子元素数组是啥
            },
            selectedOptions: [],
            shopList: [],
            loading: false,
            servetype: [{
                key: '1',
                label: '婚纱礼服'
            }, {
                key: '2',
                label: '婚礼策划'
            }, {
                key: '3',
                label: '婚宴酒店'
            }, {
                key: '4',
                label: '婚纱摄影'
            }],
            queryParams: {
                servetype: this.$route.query.servetype,
                shopaddress: this.$route.query.wantcity,
                kzid: this.$route.query.kzid,
            },
        }
    },
    created() {
        this.getlist();
        this.selectedOptions = allData;
        this.handleQuery(this.queryParams);
    },
    methods: {
        // 所有可以分配的商家信息
        async getlist() {
            // this.loading=true;
            let res = await findAllShopa({ shopaddress: this.$route.query.wantcity, servetype: this.$route.query.servetype, kzid: this.$route.query.kzid })
            this.shopList = res.data.shopname;
            let str = this.$route.query.wantcity;
            let reg = /.+?(省|市|自治区|自治州|县|区)/g;
            let aa = str.match(reg);
            if (aa[0] != undefined && aa[1] == undefined && aa[2] == undefined) {
                this.selectedOptions = [aa[0], '全部', '全部']
            } else if (aa[0] != undefined && aa[1] != undefined && aa[2] == undefined) {
                this.selectedOptions = [aa[0], aa[1], '全部']
            } else if (aa[0] != undefined && aa[1] != undefined && aa[2] != undefined) {
                this.selectedOptions = [aa[0], aa[1], aa[2]]
            }
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.num = selection.map(item => item.shopid)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        // 客资分配商家
        kzfenpeishangjia() {
            if (this.num == undefined) {
                this.$modal.msgError('请先选择要处理的信息')
            } else {
                this.lock = true;
                kzfenpeishangjia({ kzid: this.$route.query.kzid, num: this.num }).then(response => {
                    if (response.code == 200) {
                        this.lock = false;
                        this.$modal.msgSuccess("客资分配商家成功");
                        this.$refs.multipleTable.clearSelection();
                        this.getlist();
                    }else{
                       this.$modal.msgError(response.msg);
                        this.lock = false;
                    }
                })
            }
        },
        // 搜索按钮操作
        handleQuery(queryParams) {
            if (queryParams.shopaddress != '') {
                let str = this.queryParams.shopaddress;
                let reg = /.+?(省|市|自治区|自治州|县|区)/g;
                let bb = str.match(reg);
                if (bb[1] != undefined && bb[2] != undefined) {
                    this.queryParams.shopaddress = bb[0] + bb[1] + bb[2];
                } else if (bb[1] != undefined && bb[2] == undefined) {
                    this.queryParams.shopaddress = bb[0] + bb[1];
                } else if (bb[1] == undefined && bb[2] == undefined) {
                    this.queryParams.shopaddress = bb[0];
                }
            }
            findAllShopa(queryParams).then(response => {
                this.shopList = response.data.shopname;
            })
        },
        // 取消按钮操作
        resetQuery() {
            this.queryParams = {
                servetype: '',
                shopaddress: '',
                kzid: this.$route.query.kzid
            }
            this.selectedOptions = [];
            findAllShopa(this.queryParams).then(response => {
                this.shopList = response.data.shopname;
            })
        },
        // 服务城市
        handleChange(aa) {
            this.queryParams.shopaddress = aa[0] + aa[1] + aa[2]
        },
    }
}
</script>
<style scoped>
.el-col-2 {
    float: right;
}
</style>